<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'月度招商收入对比'"></contentTitle>
        <div class="layChart" ref="ndclysqsRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <!-- <div class="block_select_contain">
            <el-date-picker style="width: 15vh;"
                v-model="selectXzyf"
                type="month"
                placeholder="选择月份">
            </el-date-picker>
          
          </div> -->
          <!-- <div class="block_select_contain">
            <el-cascader :options="secondMonthOptions" :show-all-levels="false" placeholder="对比月份"
                         @change="secondYearChange"></el-cascader>
          </div> -->
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref(""),curFristYear = ref(""),curSecYear = ref("");

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem

}

const fristMonthOptions = ref([{value:'2024', label:'2024'},{value:'2025', label:'2025'},{value:'2026', label:'2026'},{value:'2027', label:'2027'},{value:'2028', label:'2028'},{value:'2029', label:'2029'},{value:'2030', label:'2030'}])
const secondMonthOptions = ref([{value:'1月', label:'1月'},{value:'2月', label:'2月'},{value:'3月', label:'3月'}])

const fristYearHandleChange = function (selectItem){
  // console.log(selectItem);
  curFristYear.value = selectItem
}

const secondYearChange = function (selectItem){
  console.log(selectItem);
}

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  // console.log(curServer);
  refreshData()

}

const selectXzyf = ref()

const ndclysqs_legend = ref([`商品`, `餐饮`]);
const ndclysqs_x = ref([])
const ndclysqs_y_1 = ref([])
const ndclysqs_y_2 = ref([])
for (let i = 1;i<=12;i++){
  ndclysqs_x.value.push(i+'月');
  ndclysqs_y_1.value.push(getRandomNumber())
  ndclysqs_y_2.value.push(getRandomNumber())
}

function getRandomNumber() {
  return Math.floor(Math.random() * 100) + 1;
}


const ndclysqsRef = ref();
const ndclysqsOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  // toolbox: {
  //   feature: {
  //     dataView: { show: true, readOnly: false },
  //     magicType: { show: true, type: ['line', 'bar'] },
  //     restore: { show: true },
  //     saveAsImage: { show: true }
  //   }
  // },
  legend: {
    data: ndclysqs_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ndclysqs_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        rotate: 0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,25]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: ndclysqs_legend.value[0],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndclysqs_y_1.value
    },
    {
      // yAxisIndex: 1,
      name: ndclysqs_legend.value[1],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(244,69,56,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: ndclysqs_y_2.value
    }
  ]
});

let ndclysqsChart
onMounted(() => {
  ndclysqsChart = drawLine(ndclysqsRef.value,ndclysqsOpt.value);
  getFwqxx()
  // refreshData()
})


async function refreshData() {
  
}


/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>